<!-- http://stackoverflow.com/questions/17859993/basic-css-how-to-overlay-a-div-with-semi-transparent-div-on-top -->
<!-- http://jsfiddle.net/EVSZQ/5/ -->
<html>
	<head>
		<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
		<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
		<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
		<style type="text/css">
			.hidden{
				display: none;
			}
			
			#workspace, #workspaceBackground{	
				width: 1000px;
				height: 800px;
				
				position : absolute;
				margin-top: 0px;
				margin-left: 0px;
			}
			
			#workspace img{
				z-index : 50;
			}
			
			#workspace div{
				z-index : 50;
			}
			
			#workspaceBackground{
				z-index : 0;
				background-color: white;//green;
			}
			
			#extendedCanvas, #extendedCanvasBorderOverlay{
				width: 800px;
				height: 600px;
				
				position : absolute;
				margin-top: 100px;
				margin-left: 100px;
				
				border: 1px solid red;
			}
			
			#extendedCanvas{
				z-index : 1;
				background-color: white;//yellow;
			}
			
			#extendedCanvasBorderOverlay{
				z-index: 200;
			}
			
			#canvas, #canvasBorderOverlay{
				width: 700px;
				height: 500px;
				
				position : absolute;
				margin-top: 150px;
				margin-left: 150px;
				
				border: 1px solid black;
			}
			
			#canvas{
				z-index : 2;
				background-color: white;//red;
			}
			
			#canvasBorderOverlay{
				z-index: 200;
			}
			
			#leftOverlay, #leftLeftOverlay, 
			#topOverlay, #topTopOverlay, 
			#rightOverlay, #rightRightOverlay, 
			#bottomOverlay, #bottomBottomOverlay{
				position : absolute;
				margin-top: 0px;
				margin-left: 0px;
			}
			
			#leftOverlay { /* Covers the left part of extended canvas */
				z-index : 100;
				
				width: 50px;
				margin-left: 100px;
				margin-top: 100px;
				height: 600px; /* Same as extended Canvas */
				background-color: rgba(248,248,255, 0.7);//rgba(230,26,26, 0.7);
			}
			
			#leftLeftOverlay { /* Covers the left part of the workspace */
				z-index : 101;
				
				width: 100px;
				height: 800px; /* Same as workspace */
				background-color: rgba(248,248,255, 0.9);//rgba(230,26,26, 0.9);
			}
			
			#topOverlay {
				z-index : 100;
				
				width: 700px; /* Same as canvas */ 
				margin-left: 150px;
				margin-top: 100px;
				height: 50px;
				background-color: rgba(248,248,255, 0.7);//rgba(230,26,26, 0.7);
			}
			
			#topTopOverlay {
				z-index : 101;
				
				width: 800px; /* Same as extended canvas */ 
				margin-left: 100px;
				height: 100px;
				background-color: rgba(248,248,255, 0.9);//rgba(230,26,26, 0.9);
			}
			
			#rightOverlay {
				z-index : 100;
				
				width: 50px;
				margin-left: 850px; /* 100 + 50 + 700 => workspace-left + extended canvas-left + width canvas  */
				margin-top: 100px;
				height: 600px; /* Same as extended Canvas */
				background-color: rgba(248,248,255, 0.7);//rgba(230,26,26, 0.7);
			}
			
			#rightRightOverlay {
				z-index : 101;
				
				width: 100px;
				margin-left: 900px;/* 100 + 800 => workspace-left + width extended canvas  */
				height: 800px; /* Same as workspace */
				background-color: rgba(248,248,255, 0.9);//rgba(230,26,26, 0.9);
			}
			
			#bottomOverlay {
				z-index : 100;
				
				width: 700px; /* Same as canvas */ 
				margin-left: 150px;
				margin-top: 650px; /* 100 + 50 + 500 => workspace-top + extended canvas-top + height canvas */
				height: 50px;
				background-color: rgba(248,248,255, 0.7);//rgba(230,26,26, 0.7);
			}
			
			#bottomBottomOverlay {
				z-index : 101;
				
				width: 800px; /* Same as extended canvas */ 
				margin-left: 100px;
				margin-top: 700px; /* 100 + 600 => workspace-top + height extended canvas */
				height: 100px;
				background-color: rgba(248,248,255, 0.9);//rgba(230,26,26, 0.9);
			}
		</style>
	</head>
	<body>
		<button id="openDialogBtn">edit</button>
		<div id="dialog">
			<div id="workspaceBackground"></div>
			<!-- Start overlays -->
			<div id="leftOverlay" class="overlayElement"></div>
			<div id="leftLeftOverlay" class="overlayElement"></div>
			<div id="topOverlay" class="overlayElement"></div>
			<div id="topTopOverlay" class="overlayElement"></div>
			<div id="rightOverlay" class="overlayElement"></div>
			<div id="rightRightOverlay" class="overlayElement"></div>
			<div id="bottomOverlay" class="overlayElement"></div>
			<div id="bottomBottomOverlay" class="overlayElement"></div>
			<div id="canvasBorderOverlay" class="overlayElement"></div>
			<div id="extendedCanvasBorderOverlay" class="overlayElement"></div>
			<!-- End overlays -->
			<div id="extendedCanvas"></div>
			<div id="canvas"></div>
			<div id="workspace">
				<img src="/canvas.jpg" width="200" height="200" />
			</div>
		</div>
		
		<script type="text/javascript">
			$( "#dialog" ).dialog({ autoOpen: false });
			$( "#dialog" ).dialog( "option", "height", $("#workspace").height() + 75);
			$( "#dialog" ).dialog( "option", "width", $("#workspace").width() + 50);
			$( "#openDialogBtn" ).click(function() {
			  $( "#dialog" ).dialog( "open" );
			});
		
			jQuery("#workspace img").resizable({
				handles: 'all',
				containment: $("#workspace")
			}).parent().draggable({
				containment: $("#workspace")
			});
			
			$('.overlayElement').on('mousedown', function(event){
				var gxstart = $('#workspace img').offset().left;
				var gxend = $('#workspace img').offset().left + $('#workspace img').width();
				var gystart = $('#workspace img').offset().top;
				var gyend = $('#workspace img').offset().top + $('#workspace img').height();  
				
				var mouseX = event.clientX;
				var mouseY = event.clientY;
				
				if( gxstart < mouseX ){
					if ( mouseX < gxend ){
						if(gystart < mouseY){
							if(mouseY < gyend){   
								$('#workspace img').trigger(event);
							}
						}
					}
				}
			});
			
			$('.overlayElement').on('mousemove', function(event){
				var gxstart = $('#workspace img').offset().left;
				var gxend = $('#workspace img').offset().left + $('#workspace img').width();
				var gystart = $('#workspace img').offset().top;
				var gyend = $('#workspace img').offset().top + $('#workspace img').height();  
				
				var mouseX = event.clientX;
				var mouseY = event.clientY;
				
				if( gxstart < mouseX ){
					if ( mouseX < gxend ){
						if(gystart < mouseY){
							if(mouseY < gyend){  
								$('.overlayElement:not(.hidden)').each(function(){
									$(this).addClass('hidden');
								});
							}
						}
					}
				}
			});
			
			//TODO make more performant
			$('body').on('mousemove', function(event){
				var gxstart = $('#workspace img').offset().left;
				var gxend = $('#workspace img').offset().left + $('#workspace img').width();
				var gystart = $('#workspace img').offset().top;
				var gyend = $('#workspace img').offset().top + $('#workspace img').height();  
				
				var mouseX = event.clientX;
				var mouseY = event.clientY;
				
				var inImage = false;
				if( gxstart < mouseX ){
					if ( mouseX < gxend ){
						if(gystart < mouseY){
							if(mouseY < gyend){  
								inImage = true;
							}
						}
					}
				}
				
				if(!inImage){
					$('.overlayElement.hidden').each(function(){
						$(this).removeClass('hidden');
					});
				}
			});
		</script>
	</body>
</html>